<template>
  <div class="nav-breadcrumb">
    <el-breadcrumb separator="/">
      <template v-for="item in breadcrumbs" :key="item.path">
        <el-breadcrumb-item>{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { ROUTES } from '@/constant'
import type { IBreadcrumb } from '@/types'
import { localCache } from '@/utils/cache'
import { mapPathBreadcrumbs } from '@/utils/map-menus'
import { onMounted, ref, watch } from 'vue'
const route = useRoute()

import { useRoute } from 'vue-router'
const breadcrumbs = ref<IBreadcrumb[]>([])
onMounted(() => {
  changeBreadcrumbs()
})

watch(
  () => route.path,
  () => {
    changeBreadcrumbs()
  }
)

const changeBreadcrumbs = () => {
  const menuData = localCache.getCache(ROUTES)
  if (!menuData) return
  const path = route.path
  breadcrumbs.value = mapPathBreadcrumbs(path, menuData.menuList)
}
</script>
<style scoped lang="scss"></style>
